<template>
  <div id="app">
    <div class="nav">{{ title }}</div>
    <router-view />
    <div class="tabbars" v-show="globalTabbar">
      <!-- .native 事件修饰符，激活路由的点击事件，默认情况只跳转路由。 -->
      <div
        class="tabbar-item"
        v-for="(item, key) in titleMaps"
        :key="item.title"
      >
        <img
          :src="`https://assets-cdn.lanqb.com/imgv3_m/images-icon/${
            tabActive == key ? item.selectedSrc : item.src
          }`"
          alt=""
        />
        <router-link
          v-if="item.route"
          :class="{ 'tab-active': tabActive == key }"
          @click.native="changeTabs(key, item.title)"
          :to="{ name: item.route }"
          >{{ item.title }}</router-link
        >
        <router-link
          v-else
          :class="{ 'tab-active': tabActive == key }"
          @click.native="changeTabs(key, item.title)"
          :to="`${item.path}`"
          >{{ item.title }}</router-link
        >
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "AppView",
  data() {
    return {
      tabActive: 0,
      title: "首页",
      titleMaps: {
        0: {
          title: "首页",
          route: "home",
          src: "nav-h01.svg", // 未选中
          selectedSrc: "nav-h02.svg", // 选中
        },
        1: {
          title: "教程",
          route: "course",
          src: "nav-c01.svg", // 未选中
          selectedSrc: "nav-c02.svg", // 选中
        },
        2: {
          title: "网校",
          route: "school",
          src: "nav-t01.svg", // 未选中
          selectedSrc: "nav-t02.svg", // 选中
        },
        3: {
          title: "大触",
          path: "/live",
          src: "nav-d01.svg", // 未选中
          selectedSrc: "nav-d02.svg", // 选中
        },
        4: {
          title: "社区",
          route: "comm",
          src: "nav-cm01.svg", // 未选中
          selectedSrc: "nav-cm02.svg", // 选中
        },
      },
      routeMaps: {
        "/": {
          id: 0,
          title: "首页",
        },
        "/course": {
          id: 1,
          title: "教程",
        },
        "/school": {
          id: 2,
          title: "网校",
        },
        "/live": {
          id: 3,
          title: "大触",
        },
        "/comm": {
          id: 4,
          title: "社区",
        },
      },
      // showTabbar: true,
    };
  },
  computed: {
    ...mapState(["globalTabbar"]),
  },
  created() {
    const id = sessionStorage.getItem("id") * 1 || 0;
    this.tabActive = id;
    const title = sessionStorage.getItem("title") || "首页";
    this.title = title;
  },
  methods: {
    changeTabs(id, name) {
      console.log(id);
      this.tabActive = id;
      this.title = this.titleMaps[id].title;
      // this.title = name;
      sessionStorage.setItem("id", id);
      sessionStorage.setItem("title", this.title);
    },
  },
  watch: {
    // $route(to) {
    //   if (to.path.startsWith("/live") || to.path == "/thanks") {
    //     this.showTabbar = false;
    //   } else {
    //     this.showTabbar = true;
    //   }
    // },
    // $route(to, from) {
    //   this.tabActive = this.routeMaps[to.path].id;
    //   this.title = this.routeMaps[to.path].title;
    // },
    // $route: {
    //   immediate: true,
    //   handler(to, from) {
    //     this.tabActive = this.routeMaps[to.path].id;
    //     this.title = this.routeMaps[to.path].title;
    //   },
    // },
  },
};
</script>
<style lang="scss" scoped>
.nav {
  height: 90px;
  background-color: lightblue;
  text-align: center;
  line-height: 90px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1000;
}
.tabbars {
  width: 100vw;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: lightblue;
  z-index: 1000;
  img {
    width: 26.5px;
    height: 24px;
  }
  .tabbar-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.tab-active {
  color: blue;
}
</style>
